<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1190625_m3wxzcfcc89.css">
    <link rel="stylesheet" href="../../css/hui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/config.css">
    <title>设置</title>
    <style>
        html,body{
            background-color: #F5F5F9;
        }
        .t{
            width: 100%;
            height: auto;
            background-color: #fff;
            margin: .1rem auto;
        }
        .heading{
            width: 100%;
            height: .79rem;
            padding: 0 .14rem;
        }
        .heading img{
            width: .47rem;
            height: .47rem;
            border-radius: 50%;
        }
        .item span{
            font-size: .16rem;
            color: #333;
        }
        .item{
            width: 100%;
            padding: 0 .14rem; 
        }
        .user_info{
            height: .55rem;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }
        .user_info input{
           font-size: .16rem;
           color: #333;
           text-align: right;
        }
        .user_info input ::-moz-placeholder{color:#999;}              
        .user_info input ::-webkit-input-placeholder{color:#999;}     
        .user_info input :-ms-input-placeholder{color:#999;}
        .sex {
            height: .56rem;
        }
        .sex .right{
           
        }
        .set_default{
            width: auto;
            margin-left: .38rem;
        }
        .set_default .checkicon {
           width: .15rem;
           height: .15rem;
           border-radius: 50%;
           border: 1px solid #333C3C;
           position: relative;
        }
        .set_default .checkicon i{
           display: none;
           font-size: .2rem;
           position: absolute;
           left: -0.04rem;
           top: -0.05rem;
        }
        .set_default .active i{
            display: block;
        }
        .set_default span{
            font-size: .16rem;
            color: #666;
            display: inline;
            margin-left: .04rem;
            position: relative;
            top: -0.01rem;
        }
        .b{
            width: 100%;
            height: auto;
            background-color: #fff;
        }
        .b .item{
            width: 100%;
            height: .55rem;
            padding: 0 .15rem;
        }
        .item .right{
            font-size: .16rem;
            color: #999;
        }
        .lgout{
            width: 3.47rem;
            margin: 2.49rem auto 0;
            line-height: .44rem;
            font-size: .18rem;
            border: 1px solid #333c3c;
        }
    </style>
</head>
<body>
    <header class="header mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">设置</h1>
    </header>
    <div class="main">
        <div class="t">
             <div class="item heading flex space-between align-items">
                 <span>头像</span>
                 <img src="../../image/user_heading.png" alt="">
             </div>
             <div class="item user_info flex space-between align-items">
                <span>昵称</span>
                <div>
                    <input type="text" placeholder="请输入用户昵称" value="">
                </div>
            </div>
            <div class="item sex flex space-between align-items">
                <span>性别</span>
                <div class="right flex flex_end align-items">
                    <div class="set_default flex flex_start align-items " data-sex="2">
                        <div class="checkicon active fl woman" >
                            <i class="iconfont icon-round_check_fill app-font-color"></i>
                        </div>
                        <span class="fl">女</span>
                    </div>
                    <div class="set_default flex flex_start align-items " data-sex="1">
                        <div class="checkicon  fl man">
                            <i class="iconfont icon-round_check_fill app-font-color"></i>
                        </div>
                        <span class="fl">男</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="b ">
            <div class="item flex align-items space-between">
                <span>手机</span>
                <div class="right"><span>156****8888</span><i class="iconfont icon-gengduo "></i></div>
            </div>
        </div>
        <div class="lgout btn-dan">退出登录</div>
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/hui.js"></script>
<script src="../../js/common.js"></script>
<script>
    $(document).ready(function(){
        hui.loading('加载中')
        getUserInfo()
        //获取用户信息
        function getUserInfo(){
            ajax('/api/user/get_user_info',{},function(res){
                if (res.code == 1) {
                    let {headimg,username,sex,phone} = res.data;
                    $('.heading img').attr('src',headimg);
                    $('.user_info input').val(username);
                    $('.checkicon').removeClass('active');

                    sex == "男" ? $('.man').addClass('active') : $('.woman').addClass('active');
                    //用户手机号
                    $('.main .b .right span').html(phone)
                }
            })
        }
        //设置名字
        $('.user_info input').blur(function(){
            var val = $(this).val()
            ajax('/api/user/set_nickname',{nickname:val},function(res){})
        })
        // 给setdefault添加默认事件
        $('.set_default').click(function(){
            var _this = this;
            $('.set_default').each(function(){
                var $checkicon = $(this).find('.checkicon');
                _this == this?$checkicon.addClass('active'):$checkicon.removeClass('active');
            })
            var sex = $(this).data('sex')
            ajax('/api/user/set_sex',{sex:sex},function(res){})
        })
        //退出登录
        $('.lgout').click(function(){
            hui.confirm('您确认要这样做吗？', ['取消','确定'], function(){
                localStorage.removeItem('uid');
                ajax('/api/user/loginout',{},function(res){})
                hui.toast('退出登录成功')
                setTimeout(() => {
                    linkTab(0);
                }, 700);
            },function(){
                console.log('取消后执行...');
            });
        })
    })

    

</script>
</html>